<script setup>
import FormCreateMobile from '@form-create/vant';
import AmountComponent from '@/components/FormCreate/mvcomponents/amountComponent/index.vue'
import { addFlowForm,updateFlowForm,getFlowFormById } from "@/api/modules/flowForm"
import * as pcTools from '@/components/FormCreate/tools/index'
//传递参数
const props = defineProps({
  //流程文件id
  flowFormId: {
    type: String,
    required: true
  },
});

const fApi = ref({});
const formData = ref({});
const options = {
    submitBtn:false,// 隐藏提交按钮
    resetBtn: false // 隐藏重置按钮
};
const rule = ref([]);
//流程版本信息
const formVersionFrom = ref({
    id: 0,//id
    flowInfoId: '',//流程信息id
    versionName: '',//版本名称
    mvFormJson: {},//移动端表单
    pcFormJson: {},//PC端表单
    createTime: '',//创建时间
    updateTime:'',//修改时间
    exist:1,//是否删除
});

const formCreateMobile = ref()

const config = ref({
    //隐藏拖拽操作按钮
    hiddenDragMenu: false,
    //隐藏拖拽按钮
    hiddenDragBtn: false,
    //是否显示保存按钮
    showSaveBtn: false,
    //是否显示右侧的配置界面
    showConfig: true,
    //是否显示组件的基础配置表单
    showBaseForm: true,
    //是否显示组件联动
    showControl: false,
    //是否显示模块管理
    showPageManage: true,
    //是否显示组件的高级配置表单
    showAdvancedForm: true,
    //是否显示组件的属性配置表单
    showPropsForm: true,
    //是否显示组件的样式配置表单
    showStyleForm: false,
    //是否显示组件的事件配置表单
    showEventForm: false,
    //是否显示组件的验证配置表单
    showValidateForm: false,
    //是否显示表单配置
    showFormConfig: false,
    //是否显示左侧的模板列表
    showTemplate: true,
    //是否显示多端适配选项
    showDevice: true,
    //隐藏上传组件
    hiddenItem: ['upload','tree','elTreeSelect','colorPicker','elTransfer','cascader',],
    // 隐藏所有子表单组件
    hiddenMenu: ['template','subform','aide','layout'],
    //是否自动选中拖入的组件
    autoActive:false, 
    //是否生成vue2语法的模板组件
    useTemplate:false,
    //定义表单配置默认值 
    formOptions:{},
    //定义渲染规则所需的formData
    appendConfigData: []
});

//设置组件
const setMenu = async() =>{
    FormCreateMobile.component('amountComponent', AmountComponent);
}

//查询表单
const getFormData = async() =>{
    getFlowFormById(props.flowFormId).then(res=>{
        formVersionFrom.value = res.data;
        rule.value = formVersionFrom.value.mvFormJson;
    })
}

onMounted(()=>{
    setMenu();
    getFormData();
})

</script>
<template>
    <div style="width: 30%;border: 0 black;">
        <FormCreateMobile ref="formCreateMobile" :rule="rule" v-model:api="fApi" v-model="formData" :option="options" style="width: 100%;" height="50vh"/>
    </div>
</template>
